<template>
	<div class="app">
	<div class="about">
		<router-link to="/">
		<div class="icon">
			<van-icon name="arrow-left" /><span>返回</span>
		</div>
		</router-link>
		<div class="title">
			<p>登入/注册</p>
		</div>
		</div>
		<main class="login-main">
			<div class="login-from">
				<label>
					<input type="text" placeholder="请输入手机号" v-model="username"/>
				</label>
				<label>
					<input type="password"  placeholder="请输入密码" v-model="password"/>
				</label>
				<!-- <button type="button">获取验证码</button> -->
			</div>
			<div class="login-btn" @click="log">登入</div>
			<!-- <div class="link-reg">
				<a href="register.html">还没账号？</a>
			</div> -->
			<!-- <div class="link-home">
				<a href="#">暂不登录</a>
			</div> -->
		</main>
		
		
	</div>
</template>

<script type="text/javascript">
	import { NavBar } from 'vant';
	import { Icon } from 'vant';

	
	
	export default{
		components: {
			[NavBar.name]:NavBar,
			[Icon.name]:Icon,
		},
		 data() {
		 	return {
		 		username: "",
		 		password: "",
		 	}
		 },
		 methods:{
			 log() {
			 		console.log(this.username, this.password)
			 		if (this.username == "") {
			 			this.$toast('手机号不能为空');
			 			return false
			 		}
			 		if (this.password == "") {
			 			this.$toast('密码不能为空');
			 			return false
			 		}
			 		this.$http.post("/user/login", {
			 			username: this.username,
			 			password: this.password
			 		}).then(res => {
			 			console.log(res)
			 			this.cate=res.data.data
			 			// 在这里进行成功或者错误的判断
			 			if (res.data.code === 0) {
			 				// 注册成功
			 				this.$toast('登录成功');
			 				let {token,uid,userInfo} =res
			 				localStorage.setItem("token",token)
			 				localStorage.setItem("uid",uid)
			 				localStorage.setItem("userInfo",JSON.stringify(userInfo))
			 				
			 				// 把登陆以后的token,uid,userInfo的数据存到vuex里
			 				this.$store.commit('change',{key:'uid',value:uid})
			 				this.$store.commit('change',{key:'token',value:token})
			 				this.$store.commit('change',{key:'userInfo',value:userInfo})
			 				this.$store.commit('change',{key:'isLogin',value:true})
			 				
			 				
			 				setTimeout(v=>{
			 					this.$router.back()
			 				},500)
			 				return false
			 			} 
			 			if(res.data.code === 10002){
			 				// 失败
			 				this.$toast('用户不存在');
			 			}
			 		}).catch(err => {
			 			console.log(err)
			 			if (this.response.status == 401) {
			 				this.$toast('手机号或密码错误');
			 			}
			 			if (this.response.status == 404) {
			 				this.$toast('网络请求失败');
			 			}
			 		})
			 	}
			 }
	}
</script>

<style type="text/css" >
	.about{
		width: 100%;
		height: 60px;
		background-color: #07BE5E;
		
		color: #fff;
	}
	.about .icon{
		color: #fff;
		padding: 20px;
		float: left;
	}
	.title p{
		width: 375px;
		position: absolute;
		text-align: center;
		font-size: 22px;
		font-weight: 500;
		line-height: 60px;
	}
	/************* 登录页  *************/
	.login-from{
		text-align: center;
		width: 100%;
		margin: 30px auto;
	}
	.login-from label{
		display: block;
		margin: 10px 0;
		border-bottom: 1px solid #EFEFEF;
	}
	.login-from input{
		border: none;
		width: 99%;
		padding: 10px 0;
		border-radius: 0;
		font: 16px "微软雅黑";
		color: #333;
		background: transparent;
		/* line-height: 18px; */
		text-align: left;
		padding-left: 10px;
	}
	.login-btn{
		height: 45px;
		background-color: #07BE5E;
		color: #FFFFFF;
		line-height: 45px;
		font-size: 20px;
		width: 70%;
		margin: 0 auto;
		margin-bottom: 5px;
		text-align: center;
		border-radius:30px;
	}
	
</style>